<template>
    <div id="sample">
        <van-nav-bar
                :title="$route.meta.title"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <!--        轮播展示-->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <van-notice-bar mode="closeable">你寄来的样品组委会已经收到，感谢你的参与。</van-notice-bar>

        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <van-cell v-for="item in list" :key="item" :title="item" />
        </van-list>
    </div>
</template>
<script>
    import { NavBar } from "vant";

    export default {
        data() {
            return {
                list: [],
                loading: false,
                finished: false,
            };
        },
        components: {
            [NavBar.name]: NavBar,
        },
        name: "teaSample",
        methods: {
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }

                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
        },
        // filter 过滤器
    }
</script>
<style>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
</style>
